<%= render Avo::PanelComponent.new title: t("avo.media_library.title"),
  data: {
    controller: 'media-library',
    media_library_controller_selector_value: params[:controller_selector],
    media_library_controller_name_value: params[:controller_name],
    media_library_item_details_frame_id_value: ::Avo::MEDIA_LIBRARY_ITEM_DETAILS_FRAME_ID,
  } do |c| %>
  <%= c.with_tools do %>
    <% if false && @attaching %>
      <%= a_button data: {
        action: 'click->media-library#selectItems',
      } do %>
        Attach
      <% end %>
    <% end %>
  <% end %>
  <% c.with_body do %>
    <% if !@attaching %>
      <%= content_tag :div, class: "p-4 pb-0",
        data: {
          controller: 'media-library-attach',
          media_library_attach_direct_uploads_url_value: helpers.main_app.rails_direct_uploads_url,
        } do %>
        <%= content_tag :div,
          class: 'dropzone relative py-6 text-center border-dashed border-2 border-gray-300 rounded-lg justify-center items-center flex flex-col text-gray-400 hover:border-primary-500 cursor-pointer',
          data: {
            media_library_attach_target: 'dropzone',
            action: 'click->media-library-attach#triggerFileBrowser',
          } do %>
          <%= helpers.svg 'heroicons/outline/cloud-arrow-up', class: 'size-6 text-gray-400' %>
          Upload a file
          <small>Click to browse or drag and drop</small>
        <% end %>

        <%= content_tag :div, "", class: "m-2 flex flex-wrap gap-2 empty:m-0", data: {
          media_library_attach_target: 'uploadingContainer',
          turbo_permanent: true,
        } %>
      <% end %>
    <% end %>
    <div class="grid grow-0 min-h-24 gap-x-4 @container/index" style="grid-template-areas: 'stack';">
      <div class="grid grid-cols-1 @sm/index:grid-cols-2 @lg/index:grid-cols-3 @3xl/index:grid-cols-4 @5xl/index:grid-cols-6 gap-4 min-h-0 min-w-0 auto-rows-max p-4" style="grid-area: stack;">
        <%= render Avo::MediaLibrary::ListItemComponent.with_collection(@blobs, attaching: @attaching, multiple: @attaching) %>
      </div>
      <%# TODO: fix the extra margin  %>
      <%= helpers.turbo_frame_tag ::Avo::MEDIA_LIBRARY_ITEM_DETAILS_FRAME_ID, class: 'relative empty:hidden bg-white inset-0 w-full h-full block empty:-ml-4 max-h-full', style: 'grid-area: stack;' %>
    </div>
  <% end %>
  <% c.with_bare_content do %>
    <div class="flex-1 flex w-full mt-4">
      <div class="flex-2 w-full sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left pagy-gem-version-<%= helpers.pagy_major_version %> ">
        <div class="text-sm text-slate-600 mr-4"><%== helpers.pagy_info @pagy %></div>
        <% if @pagy.pages > 1 %>
          <%# xanchor_string is not valid key word argument and it breaks when require "pagy/extras/calendar" %>
          <%# https://github.com/ddnexus/pagy/blob/d70e443872a5b18da4e482454b3c8b4a1c86cb6b/gem/lib/pagy/extras/calendar.rb#L47 %>
          <%#== helpers.pagy_nav(@pagy, xanchor_string: "data-turbo-frame=\"#{@turbo_frame}\"") %>
          <%== helpers.pagy_nav(@pagy) %>
        <% end %>
      </div>
    </div>
  <% end %>
<% end %>
